import { createApp } from 'vue'
import XtxMessage from './xtx-message.vue'

function fn (obj) {
  // creatApp 有两个参数（导入的组件，props的参数）
  const app = createApp(XtxMessage, { ...obj, remove })
  const div = document.createElement('div')
  div.setAttribute('class', 'message')
  document.body.appendChild(div)
  const _this = app.mount(div)
  _this.show()
  const messageList = document.getElementsByClassName('message')
  // 解决还有没有
  setTimeout(() => {
    for (let i = 0; i < messageList.length; i++) {
      messageList[i].querySelector('.xtx-message').style.marginTop =
        i * 80 + 'px'
    }
  }, 10)
  //   console.log(11)
  function remove () {
    app.unmount(div)
    document.body.removeChild(div)
    const messageList = document.getElementsByClassName('message')
    for (let i = 0; i < messageList.length; i++) {
      messageList[i].querySelector('.xtx-message').style.marginTop =
        i * 80 + 'px'
    }
    // console.log(messageList.length)
  }
}
function Message (obj) {
  fn(obj)
}
Message.success = function (obj) {
  obj.type = 'success'
  fn(obj)
}
Message.error = function (obj) {
  obj.type = 'error'
  fn(obj)
}
export { Message }
